<template>
	<div class="p-4">
		<el-card class="box-card p-4">
			<template #header>
				<div class="card-header">
					<div class="title mb-2">
						<span>{{info.title}}</span>
					</div>
					<div class="time">
						{{info.create_time}}
					</div>
				</div>
			</template>
			<div class="pt-4 contain">
				<p v-html="info.content"></p>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import { GetMessageDetail } from '@/api/basicSettings'
	// 接受路由传参
	import {useRoute} from "vue-router";
	const route = useRoute();
	// 接受路由传参end
	const id = route.query.id//消息id
	const info = ref({})//消息详情
	const GetDetail = async () =>{
		await GetMessageDetail({id:id}).then(res=>{
			info.value = res
		})
	}
	GetDetail()
</script>

<style lang="scss" scoped>
	.title {
		color: var(--el-text-color-main);
		font-size: var(--el-font-size-extra-large);
		font-weight: bold;
	}

	.time {
		color: var(--el-text-color-main1);
		font-size: var(--el-font-size-small);
	}

	.contain {
		color: var(--el-text-color-main);
		font-size: var(--el-font-size-small);
		line-height: 22px;
	}
</style>